<template>
	<view>
		<view class="main">
			<swiper class="main-image" :indicator-dots="true" :acceleration="true" easing-function="easeInOutCubic" :circular="true"
			 :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item>
					<image :src="item.img" mode="heightFix"></image>
				</swiper-item>
				<swiper-item v-for="(item, index) in item.productMainPictures">
					<image :src="item.url" mode="heightFix"></image>
				</swiper-item>
			</swiper>

			<view class="title">
				<text>{{item.title}}</text>
			</view>
			<view class="tags" v-if="item.tags">
				<view class="tag" v-for="item in item.tags" @click="toTagProducts(item.id)">
					{{item.title}}
				</view>
			</view>
			<view class="price" v-if="item.price">
				<text>¥{{item.price}}</text>
			</view>

			<view class="line"></view>

			<view class="summary">
				<text>{{item.summary}}</text>
			</view>

			<view class="stories" v-if="item.stories">
				<text>商品故事</text>
				<view class="story" v-for="(item, index) in item.stories" :id="item.id">
					<view class="title">
						{{item.title}}
					</view>
					<view class="context">
						<text v-html="item.context"></text>
					</view>
				</view>
			</view>


			<view class="detial-pictures" v-if="item.productDetailPictures">
				<text title="detail-pictures">细节呈现</text>

				<view class="grid">
					<view @click="preview(item)" class="grid-item" v-for="(item, index) in item.productDetailPictures">
						<image :src="item.url" mode="aspectFill"></image>
					</view>
					<view class="grid-item" v-if="item.productDetailPictures.length > 1" @click="toMoreDetailPage(item.id)">
						<uni-icons type="more-filled" size="32" color="#c2c2c5"></uni-icons>
						<text>更多</text>
					</view>
				</view>

				<!-- 				<uni-grid :column="3">
					<uni-grid-item v-for="(item, index) in item.productDetailPictures">
						<image :src="item.url" mode="scaleToFill"></image>
					</uni-grid-item>
					<uni-grid-item class="more">
						<text>更多</text>
						<uni-icons type="forward" size="64" color="#c2c2c5"></uni-icons>
					</uni-grid-item>
				</uni-grid> -->
			</view>


		</view>


		<view class="comment" id="comment">
			<view class="release">
				<text>我来说一说……</text>

			</view>

			<view class="list">
				<view class="each" v-for="comment in comments">
					<view class="avatar">
						<image :src="comment.avatar" mode="heightFix"></image>
					</view>
					<view class="nickname">
						<text>{{comment.nickname.length<9?comment.nickname:comment.nickname.substring(0.8)+'... '}} ·
							{{comment.createdTme}} :</text>
							<text class="replay-btn"  @click="replay(comment)">
								回复		
							</text>
					</view>


					<view class="context">
						<text>{{comment.context}}</text>
					</view>

					<view class="replay" v-for="replay in comment.replayComment">
						<view class="avatar">
							<image :src="replay.avatar" mode="heightFix"></image>
						</view>
						<view class="nickname">
							<text>{{replay.nickname.length<7?replay.nickname:replay.nickname.substring(0,6)+'... '}} · {{replay.createdTme}}
								回复:</text>
						</view>

						<view class="context">
							<text>{{replay.context}}</text>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="block" style="height: 80rpx;">

		</view>

		<view class="comment-fixed">
			<view class="comment">
				<uni-icons type="chat" color="#808080" size="28rpx"></uni-icons>
				<input @blur="commentPlaceholder= '写下你的想法吧～'" confirm-type="send" @confirm="commit(pid)" v-model="commentInputValue" :key="commentInputVersion" :focus="commentFocus" :placeholder="commentPlaceholder"></input>
			</view>
			<view class="icon">
				<view @click="like(item)">
					<view style="{text-align: center; width: 100%;}" :animation="item.liked ? animationForLike : ''">
						<uni-icons :type="item.liked? 'heart-filled': 'heart'" :color="item.liked? '#ff8785': '#161412'" size="18"></uni-icons>
					</view>
					<text>{{item.like}}</text>
				</view>
				<view @click="favourite(item)">
					<view style="{text-align: center; width: 100%;}" :animation="item.favourited ? animationForFavourite : ''">
						<uni-icons :type="item.favourited? 'star-filled': 'star'" :color="item.favourited? '#e2ae46': '#161412'" size="18"></uni-icons>
					</view>
					<text>{{item.favourite}}</text>
				</view>
				<view @click="toComment">
					<uni-icons type="chat" color="#161412" size="18"></uni-icons>
					<text>{{commentCount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				id: 0,
				item: {},
				comments: [],
				commentCount: 0,
				commentFocus: false,
				animationForLike: {},
				animationForFavourite: {},
				commentPlaceholder: '写下你的想法吧～',
				commentInputVersion: 0,
				commentInputValue: '',
				pid: 0
			}
		},
		methods: {
			init() {
				var that = this
				this.get('product/getOneById/' + that.id, null, (res) => {
					that.item = res.data.obj
				})
				this.get('product/getComments/' + that.id, null, (res) => {
					that.comments = res.data.list
					that.commentCount = res.data.count[0]
				})
			},
			preview(item) {
				let urls = []
				for (var i = 0; i < this.item.productDetailPictures.length; i++) {
					urls = [...urls, this.item.productDetailPictures[i].url]
				}
				uni.previewImage({
					current: item.url,
					urls
				})
			},
			// 回复评论（1级）
			replay(comment) {
				var that = this
				var parentId = comment.id
				that.commentFocus = true
				if(comment.id !== 0) 
				that.commentPlaceholder = `回复 ${comment.nickname}:`
				that.commentInputVersion++
				that.pid = parentId
			},
			commit(pid){
				let data = {
					parentId: pid,
					context: this.commentInputValue,
				}
				console.log(data,'todo：填充更多数据，发送post请求发布评论')
			},
			toMoreDetailPage(id) {
				uni.navigateTo({
					url: '../pictures/pictures?id=' + id + '&status=detail',
					animationType: 'pop-in',
					animationDuration: 500
				})
			},
			toComment() {
				var top = 0
				this.$tool.getRect('#comment').then(res => {
					uni.pageScrollTo({
						scrollTop: res.top,
						duration: 300
					})
				})

			},
			toTagProducts(id) {
				uni.navigateTo({
					url: "../products/products",
					animationType: 'slide-in-right'
				})
			},
			like(item) {
				var animation = uni.createAnimation({
					transformOrigin: "50% 50% 0",
					delay: 0,
					duration: 330,
					timingFunction: 'ease'
				})
				this.animation = animation
				// todo:发送用户喜欢的请求 get
				if (!item.liked) {
					this.flipAndEnlarge()
					item.like++
				} else {
					item.like--
				}
				item.liked = !item.liked
			},
			favourite(item) {
				var animation = uni.createAnimation({
					transformOrigin: "50% 50% 0",
					delay: 0,
					duration: 189,
					timingFunction: 'ease'
				})
				this.animation = animation
				// todo:发送用户收藏的请求 get
				if (!item.favourited) {
					this.enlarge()
					item.favourite++
				} else {
					item.favourite--
				}
				item.favourited = !item.favourited
			},
			// 翻转放大动画
			flipAndEnlarge() {
				this.animation.rotateY(180).opacity(0.5).scale(1.42222, 1.42222).opacity(0.1).step()
				this.animation.rotateY(0).opacity(1).scale(1, 1).step()
				this.animationForLike = this.animation.export()
			},
			// 翻转放大动画
			enlarge() {
				this.animation.rotateZ(15).opacity(0.5).scale(1.3223, 1.3223).step()
				this.animation.rotateZ(-15).scale(1, 1).opacity(1).step()
				this.animation.rotateZ(0).scale(1, 1).opacity(1).step()
				this.animationForFavourite = this.animation.export()
			}
		},
		onShow() {

		},
		onLoad(option) {
			this.id = option.id
			this.init()
		}
	}
</script>

<style lang="scss">
	.main {
		.main-image {
			display: flex;
			flex-direction: row;
			justify-content: center;
			height: 600rpx;

			image {
				height: 600rpx;
			}
		}

		text-align: center;

		.title {
			padding: 30rpx;
			line-height: 45rpx;
			font-size: $uni-font-size-lg;
			font-weight: 600;
		}

		.tags {
			display: inline-flex;
			justify-content: center;

			.tag {
				height: 40rpx;
				padding: 0 20rpx;
				margin: 0 10rpx;
				font-size: 18rpx;
				margin-bottom: 30rpx;
				line-height: 40rpx;
				color: #137C92;
				border: #137C92 solid 1rpx;
			}
		}

		.price {
			font-size: 40rpx;
			color: $uni-text-color;
		}

		.summary {
			text {
				display: block;
				margin: 0px 40rpx;
				// padding-top: 20rpx;
				// padding-bottom: 20rpx;
				color: $uni-text-color-p;
				text-align: left;
				line-height: 35rpx;
				font-size: $uni-font-size-sm;
			}
		}

		.stories {
			text-align: left;

			text {
				font-size: $uni-font-size-lg;
				font-weight: 600;
				display: block;
				margin: 30rpx 40rpx;
			}

			.title {
				font-size: $uni-font-size-base;
				font-weight: 100;
				padding: 0rpx 40rpx;
			}

			.context {
				text {
					font-size: $uni-font-size-sm;
					font-weight: 100;
					padding: 0;
				}
			}

		}

		.detial-pictures {
			text-align: left;

			text {
				font-size: $uni-font-size-lg;
				font-weight: 600;
				display: block;
				margin: 30rpx 40rpx;
			}

			.grid {
				// margin: 0 40rpx;
				height: 690rpx;
				margin: 0 auto;
				width: 690rpx;
				// background-color: #c2c2c2;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.grid-item {
					border-radius: 8rpx;
					height: 222rpx;
					width: 222rpx;
					display: flex;
					margin: 1rpx;
					flex-shrink: 1;
					border: solid #c2c2c2 1rpx;
					overflow: hidden;
					justify-content: center;
					align-items: center;
					align-content: center;
					flex-direction: column;

					text {
						font-size: 32rpx;
						margin: 0;
						font-weight: 100;
						color: $uni-text-color-grey;
					}

					image {
						height: 222rpx;
						width: 222rpx;
						border-radius: 8rpx;
					}
				}
			}
		}
	}


	.comment {
		.release {
			margin: 40rpx;

			text {
				font-size: $uni-font-size-sm;
				color: $uni-text-color-placeholder;
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			padding: 0rpx 30rpx;
			width: calc(100% - 60rpx);
			overflow: hidden;

			.each {
				position: relative;

				.avatar {
					position: relative;
					top: 0;
					left: 0;
					height: 64rpx;
					width: 64rpx;
					border-radius: 50%;

					image {
						height: 64rpx;
						border-radius: 50%;
					}
				}

				.nickname {
					position: relative;
					width: 500rpx;
					top: -74rpx;
					left: 80rpx;

					text {
						color: #5d5d5d;
						font-size: 22rpx;
					}
					.replay-btn{
						font-size: 20rpx;
						padding-left: 20rpx;
						color: $color1;
						text-decoration: underline;
					}
				}

				.context {
					position: relative;
					top: -72rpx;
					left: 80rpx;

					text {
						color: #202020;
						font-size: 28rpx;
					}
				}


				.replay {
					.avatar {
						height: 40rpx;
						width: 40rpx;
						top: -30rpx;
						left: 30rpx;

						image {
							height: 40rpx;
						}
					}

					.nickname {
						text {
							font-size: 18rpx;
						}
					}

					height: intrinsic;
					position: relative;
					left: 40rpx;
				}
			}
		}
	}

	.comment-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx 0;
		width: 100%;
		background-color: #f7f7fa;
		display: flex;
		flex-direction: row;

		.comment {
			display: inline-flex;
			margin: 0 30rpx;
			width: 65%;
			padding: 15rpx;
			border-radius: 8rpx;
			background-color: #e6e6e6;
			color: $uni-text-color-placeholder;
			box-shadow: 0px 0px 10rpx rgba(206, 206, 206, 0.2);

			input {
				width: 100%;
				padding-left: 10rpx;
				font-size: $uni-font-size-sm;
			}
		}

		.icon {
			width: 35%;
			margin-right: 30rpx;
			display: flex;
			justify-items: flex-start;
			flex-direction: row;
			justify-content: space-between;

			view {
				height: 100%;
				display: flex;
				flex-direction: column;
				align-content: space-between;
				justify-content: space-around;
				width: 50%;
				text-align: center;

				text {
					font-size: 18rpx;
				}
			}


		}

	}
</style>
